<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>丰享悦家</title>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/discuss_add.css">
    <script src="../interface/interface.js"></script>
</head>
<body>
<div class="content">
    <div class="header">
        <p class="title">发布 <i onclick="history.go(-1)" class="titleIonc"></i></p>
    </div>
</div>
<form action="/mobile/index.php?act=circle&op=discuss_add" method="post" enctype="multipart/form-data">
<div class="main" style="background: #f5f5f5">
    <div style="overflow:hidden;border-bottom: 1px solid #ccc">
        <p>发布</p>
        <input style="height: 40px; width: 80%;float: left" type="text" id="title" name="title" placeholder="请填写标题">
    </div>
    <p style="height: 200px;">内容</p>
    <textarea id="content" name="content" style="padding-top:12px;box-sizing:border-box;resize:none;width:80%;height:200px;"></textarea>
    <input type="hidden" name="cid" id="type">
</div>

<div style="height: 40px;background: #ffffff;padding-left: 10px ">
    <p style="position: absolute;width: 20%;line-height:40px;font-size: 14px;">添加图片</p>
    <!--<input type="file" style="float: left;opacity: 0; height:40px;line-height:40px;width: 80%" id="uploadImage" accept="image/*" num="5"-->
           <!--onchange="upload(this,'imgs','btns','thumb')"/>-->

    <input style="float: left;opacity: 0; height:40px;line-height:40px;width: 100%"
           type="file" id="uploadImage" accept="image/*" num="9" name="myPhoto"
           onchange="upload(this,'imgs','btns','thumb')"/>
</div>
<div style="background: #f5f5f5 ;height: 6px;"></div>
<ul class="pic" id="imgs" >
    <!--<li>-->
        <!--<img src="./../images/bg_01.png" alt=""/>-->
        <!--<p>删除</p>-->
    <!--</li>-->
</ul>
<div style="background:rgb(254,109,130);margin: 40px 10px;border-radius: 5px">
    <span id="btns"></span>
    <p id="btn" style="line-height: 40px;text-align: center;font-size: 17px;color: #ffffff">发布</p>
</div>
</form>
<script type="text/html" id="pic_tpl">
    <% for (var i in theme_list['images']) { %>
    <li>
        <img src="/<%=theme_list['images'][i]%>" alt=""/>
        <p>删除</p>
    </li>
    <% } %>
</script>
<script type="text/html" id="content_tpl">
    <div style="overflow:hidden;border-bottom: 1px solid #ccc">
        <p>发布</p>
        <input style="height: 40px; width: 80%;float: left" type="text" id="title" name="title" placeholder="请填写标题" value="<%= theme_list['theme_name']%>">
        <input type="hidden" name="id" value="<%=theme_list['theme_id']%>">
        <input type="hidden" name="cid" id="type" value="<%=theme_list['circle_id']%>">
    </div>
    <p style="height: 200px;">内容</p>
    <textarea id="content" name="content"  style="padding-top:12px;box-sizing:border-box;resize:none;width:80%;height:200px;"><%=theme_list['theme_content']%></textarea>
</script>
<script type="text/javascript" src="../js/startmove.js"></script>
<script type="text/javascript" src="../js/config.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/template.js"></script>
<script>
    var url = window.location.href;
    var type = url.substring(url.indexOf('?type=')+6);
    $('#type').val(type);
    var btns = document.getElementById('btn');
    btns.onclick = function(){
         var title = document.getElementById('title');
         var content = document.getElementById('content');
         var form = document.getElementsByTagName('form')[0];
         if(title.value==''){
                creatLayout("请填写标题");
                return;
         }
         if(content.value==''){
                creatLayout("请填写内容");
                return;
         }
         form.submit();
    }

    //创建提示框
    function creatLayout(Html){
        var Layout = document.createElement('div');
        Layout.className = 'code_tips';
        Layout.innerHTML = Html;
        document.body.appendChild(Layout);
        Move(Layout,'opacity',100);
        setTimeout(function(){
            Move(Layout,'opacity',0);
            setTimeout(function(){
                document.body.removeChild(Layout);
            },500)
        },1000)
    }

    function upload(obj, imgId, btnId, name) {
        var _self = obj;
        var _this = $(obj);
        var fileReader = new FileReader();
        fileReader.onload = function (e) {
            if (fileReader.readyState == FileReader.DONE) {
                var file = _self.files[0];
                var size = file.size;
                var width = file.width;
                var height = file.height;
                var param_num = _this.attr('num');//上传图片数量
                var param_count = _this.attr('count');//已上传图片数量
                if (param_num == null || param_num == undefined) {
                    _this.attr('num', 1);
                }
                if (param_count == null || param_count == undefined) {
                    _this.attr('count', 0);
                }
                var num = parseInt(_this.attr('num'));
                var count = parseInt(_this.attr('count'));
                if (count < num) {
                    count = count + 1;
                    var upFileId = _this.attr('id');
                    var fileId = imgId + '_' + count;
                    var func = 'delImg("' + upFileId + '","' + fileId + '")';
                    $("#" + imgId).append('<li class="' + fileId + '"><img src="' + this.result + '"/><p class="' + fileId + '" onclick=' + func + '>删除</p></li>');
                    $("#" + btnId).append('<input type="hidden" name="' + name + '[]" class="' + fileId + '"  value="' + this.result + '">');
                    _this.attr('count', count);
                } else {
                    alert('最多上传' + num + '张');
                }
            }
        };
        //一次加载多个文件
        var i = 0, src = _self.files;
        fileReader.readAsDataURL(src[i]);
        fileReader.onloadend = function () {
            i++;
            if (i < src.length) fileReader.readAsDataURL(src[i]);
        }
    }

    var id = getQueryString('id');
    if(id){
        document.title = "编辑";
        $(".title").html("编辑<i onclick='history.go(-1)' class='titleIonc'></i>");
        $.ajax({
             type:"get",
             url:ApiUrl+'/index.php?act=circle&op=edit',
             dataType:"json",
             data:{id:id},
             success:function(resulte){
                    var con_html = template('content_tpl',resulte.datas);
                    $('.main').html(con_html);
                    var pic_html = template('pic_tpl',resulte.datas);
                    $('#imgs').html(pic_html);
             }
        })
    }

    function delImg(upInputId, fileId) {
        var _this = $("#" + upInputId);
        var count = parseInt(_this.attr('count'));
        _this.attr('count', count - 1);
        $("." + fileId).remove();
    }
</script>
</body>

</html>